<template>
  <div style="display: inline-block;">
    <el-select
      v-model="select"
      filterable
      clearable
      collapse-tags
      multiple
      style="width: 230px;"
      placeholder="请选择"
      @change="handleChange"
    >
      <el-option
        v-for="item in optionsList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
  </div>

</template>

<script>
import api from "@/api/index";
export default defineComponent({
  props: {
    index: {
      type: Number,
      default: 0
    },
    itemData: {
      type: Object,
      default: {}
    },
    value:{
      type:Array,
      default:()=>[]
    }
  },
  setup(props, context) {
    const select = ref(props.value)
    const optionsList = ref([])
    const handleChange = () => {
      context.emit('handleChange', select, props.index, props.itemData)
    }
    onMounted(() => {
      if (props.itemData.fieldCode === "createBy") {
        api.formHistory.getAllCommitUser().then((res) => {
          optionsList.value = [...res]
        })
      } else {
        optionsList.value = [
          {
            name: '手动结束',
            id: '0'
          },
          {
            name: '流转完成',
            id: '1'
          },
          {
            name: '进行中',
            id: '2'
          }
        ]
      }
    });
    return {
      select,
      optionsList,
      handleChange
    }
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" >

</style>
